<template>
  <view class="container">
    <!-- 头部 -->
    <!-- 头像和昵称区域 -->
    <view class="header">
      <image src="/static/iu.jpg" class="avator" mode=""></image>
      <view class="nickname">
        皮卡丘
      </view>

    </view>

    <!-- 表单 -->
    <view class="out_account">





      <view class="account">

        <u-read-more>
          <rich-text :nodes="content"></rich-text>
        </u-read-more>



      </view>


    </view>
    <!-- 底部 -->


    <!-- <u-button class="footer" type="primary" click="handleSignUp" text="提交"></u-button> -->
    <button class="footer" type="primary" click="handleSignUp" text="提交">我已阅读并同意以上协议

    </button>
  </view>
</template>

<script>
export default {
  data () {
    return {
      // 这是一段很长的文字，也可能包含有HTML标签等内容
      content: ` 服务承诺书 篇1
      　　（1）我公司对所提供的仪器至少提供3年免费保修服务、终身维修服务。我公司在收到用户单位报障后2个小时内响应，并在24小时内到达用户现场并排除故障。我公司如在接到用户的维修通知后未能按时到现场的，延误一次顺延免费保修时间三个月。免费保修期外所需更换的零部件按成本价收取费用。
      
      　　（2）设备在安装调试并通过最终验收合格后进入免费保修期，验收不合格设备一律退回。
      
      　　（3）设备到货安装后，现场进行设备的使用和维护培训。现场培训完成后，需集中设备使用者到指定地点进行免费高级培训，培训时间不少于3天/110人。
      
      　　（4）其它服务承诺：本设备送达用户后，根据用户的时间要求派专业技术人员上门免费安装、调试。
      
      　　投标人按要求应详细说明售后服务保证内容，出现故障响应时间及售后服务人员情况（特别是售后服务技术人员简历介绍），并填写下表：
      
      　　投标人（公章）：甘肃紫光智能交通与控制技术有限公司
      
      　　法定代表人或法人授权代表（签字）：
      
      　　日期：20xx年4月13日
      服务承诺书 篇1
      　　（1）我公司对所提供的仪器至少提供3年免费保修服务、终身维修服务。我公司在收到用户单位报障后2个小时内响应，并在24小时内到达用户现场并排除故障。我公司如在接到用户的维修通知后未能按时到现场的，延误一次顺延免费保修时间三个月。免费保修期外所需更换的零部件按成本价收取费用。
      
      　　（2）设备在安装调试并通过最终验收合格后进入免费保修期，验收不合格设备一律退回。
      
      　　（3）设备到货安装后，现场进行设备的使用和维护培训。现场培训完成后，需集中设备使用者到指定地点进行免费高级培训，培训时间不少于3天/110人。
      
      　　（4）其它服务承诺：本设备送达用户后，根据用户的时间要求派专业技术人员上门免费安装、调试。
      
      　　投标人按要求应详细说明售后服务保证内容，出现故障响应时间及售后服务人员情况（特别是售后服务技术人员简历介绍），并填写下表：
      
      　　投标人（公章）：甘肃紫光智能交通与控制技术有限公司
      
      　　法定代表人或法人授权代表（签字）：
      
      　　日期：20xx年4月13日`

    }
  },
  methods: {


  }
}
</script>

<style lang="scss">
.container {

  height: 100% !important;
}

.header {
  clear: both;
  height: 206px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .avator {
    margin-bottom: 35px;
    width: 55px;
    height: 54px;
    border-radius: 45px;
    border: 2px solid white;
    box-shadow: 0 1px 5px black;
  }

  .nickname {
    margin-top: 15px;
    color: white;
    font-size: 16px;
    font-weight: block;
  }

}


.out_account {


  background-color: white;
  width: 342px;


  position: relative;
  top: -15px;
  left: 15px;

  .form_title {
    height: 52px;
    line-height: 52px;
    text-align: left;
    font-size: 14px;

  }

  .account {

    padding: 10px 10px;
    height: 250px;

    .form_title {
      border-bottom: 1px solid #F0EEEE;
    }


  }


}

.footer {
  width: 100%;
  position: fixed !important;
  bottom: 0;

}
</style>
sss
